<template>
  <div class="flex d-table" id="d-table" style="position: relative">
    <pt-table-loading v-show="loading" />
    <div class="check-l">
      <el-card class="state" shadow="hover">
        <div class="title">订单进度</div>
        <ul class="u-st">
          <li v-for="(item,index) in curOrderlist.goodsSellOutStatus" :key="index">
            <div class="wo">【{{item.operationname}}】{{item.statstr}}</div>
            <div class="ti">系统：{{item.createtime}}</div>
          </li>
        </ul>
      </el-card>
      <el-card class="state" shadow="hover">
        <div class="title">配送信息</div>
        <ul class="pay">
          <li>
            <span class="ti">是否自取：</span>
            <span class="wo">{{curOrderlist.suportself?'是':'否'}}</span>
          </li>
          <li>
            <span class="ti">是否预订单：</span>
            <span class="wo">{{curOrderlist.booked?'是':'否'}}</span>
          </li>

          <li v-if='curOrderlist.booked'>
            <span class="ti">预订时间：</span>
            <span class="wo">{{curOrderlist.booktime}}</span>
          </li>
          <li v-if="!curOrderlist.suportself">
            <span class="ti">预计送达时间：</span>
            <span class="wo">{{curOrderlist.distime}}</span>
          </li>
          <li v-if="!curOrderlist.suportself">
            <span class="ti">骑手姓名：</span>
            <span class="wo">{{curOrderlist.shopper}}</span>
          </li>
          <li v-if="!curOrderlist.suportself">
            <span class="ti">骑手电话：</span>
            <span class="wo">{{curOrderlist.shoppermobile}}</span>
          </li>
          <li v-if="!curOrderlist.suportself">
            <span class="ti">配送距离：</span>
            <span class="wo">{{curOrderlist.distance||0}}M</span>
          </li>
        </ul>
      </el-card>
    </div>
    <div class="check-r">
      <el-card class="msg " shadow="hover">
        <span class="title">基本信息</span>
        <ul class="default flex">
          <li class="flex-row">
            <span class="ti">订单号:</span>
            <span>{{curOrderlist.ordercode}}</span>
          </li>
          <li class="flex-row">
            <span class="ti">支付方式:</span>
            <span>{{curOrderlist.ispay == '1' ? paySatus(curOrderlist.paytype) : '未支付' }}
            </span>
          </li>
          <li class="flex-row">
            <span class="ti">所属区域:</span>
            <span>{{curOrderlist.agentname}}</span>
          </li>
          <li class="flex-row" style="width: 100%">
            <span class="ti">订单备注:</span>
            <span>{{curOrderlist.content}}</span>
          </li>
        </ul>
      </el-card>
      <el-card class="msg" shadow="hover">
        <span class="title">用户信息</span>
        <ul class="default flex" v-if="curOrderlist.suportself">
          <li class="flex-row">
            <span class="ti">自取电话:</span>
            <span>{{curOrderlist.selfmobile}}</span>
          </li>
          <li class="flex-row">
            <span class="ti">自取时间:</span>
            <span >{{curOrderlist.selftime}}</span>
          </li>
        </ul>

        <ul class="default flex" v-else>
          <li class="flex-row">
            <span class="ti">收货人姓名:</span><span>{{curOrderlist.username}}</span>
          </li>
          <li class="flex-row">
            <span class="ti">收货人电话:</span>
            <span >{{curOrderlist.userphone}}</span>
          </li>
          <li class="flex-row">
            <span class="ti">下单人电话:</span><span>{{curOrderlist.usermobile}}</span>
          </li>

          <li class="flex-row" style="width: 100%">
            <span class="ti">收货人地址:</span>
            <span>{{curOrderlist.useraddress}}{{curOrderlist.address}}</span>
          </li>
        </ul>
      </el-card>

      <el-card class="msg" shadow="hover">
        <span class="title">餐厅信息</span>
        <ul class="default flex">
          <li class="flex-row"><span class="ti">餐厅名称:</span><span>{{curOrderlist.businessname}}</span></li>
          <li class="flex-row"><span class="ti">餐厅电话:</span><span>{{curOrderlist.businessmobile}}</span></li>
          <li class="flex-row"><span
            class="ti">配送方式:</span><span>{{curOrderlist.isdeliver=='0'?'平台专送':'商家自配送'}}</span></li>
          <li class="flex-row"><span class="ti">商家服务费率:</span><span>{{curOrderlist.coefficient}}%</span></li>
        </ul>
      </el-card>
      <el-card class="msg" shadow="hover">
        <span class="title">菜品信息</span>
        <ul class="cuisine">
          <li class="flex-row" v-for="item in curOrderlist.goodsSellRecordChildren" :key="item.id">
            <span>{{item.goodssellname|capitalize(item.standaroptionname)}}</span>
            <span>x{{item.num}}</span><span>{{item.totalprice}}</span>
          </li>
          <li class="flex-row">
            <span>餐盒费</span>
            <span></span>
            <span>{{curOrderlist.packing || 0}}</span>
          </li>
           <li class="flex-row">
            <span>配送费</span>
            <span></span>
            <span>{{curOrderlist.deliveryfee || 0}}</span>
          </li>
          <li class="flex-row">
            <span>区域承担的费用</span><span></span><span>-{{curOrderlist.subsidy }}</span>
          </li>
           <li class="flex-row">
            <span>商家承担的费用</span><span></span><span>-{{curOrderlist.activityprice|subMoney(curOrderlist.subsidy)}}</span>
          </li>
          <li class="flex-row">
            <span></span>
            <span class="totla">
              <!--已优惠金额:{{curOrderlist.price-curOrderlist.totalpay}}元 -->&nbsp;&nbsp;&nbsp;实付:
              <span class="price">{{curOrderlist.totalpay}}</span>
            </span>
          </li>
        </ul>
      </el-card>
    </div>
  </div>
</template>

<script>
  import acction from '@/utils/acction.js'
  import { paySatus } from '@/utils/ptkc'
  export default {
    props: {
      curOrderlist: Object,
      loading: true
    },
    filters: {  //商品名称
      capitalize(t1, t2) {
        let str = t1;
        if (t2) str += `(${t2})`
        return str
      },
      subMoney(m1,m2) {
        if (m1 >= '0' && m2 >= '0') {
          return  new acction(m1, m2).accSub()
        } else {
          return '0'
        }
      }
    },
    data() {
      return {
        paySatus: paySatus
      }
    }
  }
</script>

<style scoped>
  .d-table{

  }
  .check-l{
    width:400px;
  }
  .check-l .state{
    margin-bottom: 15px;
    margin-right: 20px;
  }
  .check-l .state .title{
    margin-bottom: 5px;
    font-weight: 600;
  }
  .check-l .state ul.u-st li{
    margin-bottom: 10px;
  }
  .check-l .state ul.u-st li .wo{

  }
  .check-l .state ul li .ti{
    text-align: right;
    color: #999;
  }
  .check-r{
    flex: 1;
  }
  .check-r .msg{
    margin-bottom: 15px;
  }
  .check-r .msg .title{
    font-weight: 600;
    width: 140px;
  }

  .check-r .msg ul{
    flex: 1;
  }
  .check-r .msg ul li .ti{
    color: #999;
    text-align: right;
    margin-right: 10px;
  }
  .check-r .msg ul.default{
    flex-flow: row wrap;
  }
  .check-r .msg ul.default li{
    width: 50%;
  }
  .check-r .msg ul.cuisine li{
    line-height: 30px;
    justify-content: space-between;
  }
  .check-r .msg ul.cuisine li span:nth-child(1){
    width: 352px;
  }
  .check-r .msg ul.cuisine li .totla{
    margin-top: 10px;
    color: #999;
  }
  .check-r .msg ul.cuisine li .totla .price{
    font-weight: bold;
    font-size: 16px;
    color: red;
  }
</style>
